<template>
	<div
		class="admin-tab__chrome-tab"
		:class="{ 'admin-tab__chrome-tab--active': isActive, 'admin-tab__chrome-tab--hover': isHover }"
		@mouseenter="setTrue"
		@mouseleave="setFalse"
	>
		<div class="admin-tab__chrome-tab__bg">
			<SvgRadiusBg
				:dark-mode="darkMode"
				:is-active="isActive"
				:is-hover="isHover"
				:primary-color="primaryColor"
				:bg-color="bgColor"
				:hover-bg-color="hoverBgColor"
				:mix-color="mixColor"
				:mix-ratio="mixRatio"
			/>
		</div>
		<span class="admin-tab__chrome-tab__slot">
			<slot></slot>
		</span>
		<div v-if="closable" class="admin-tab__chrome-tab__icon">
			<IconClose :is-active="isActive" :active-color="primaryColor" @click="handleClose" />
		</div>
		<div
			class="admin-tab__chrome-tab__divider"
			:class="{
				'admin-tab__chrome-tab__divider--hide': isHover || isActive,
				'admin-tab__chrome-tab__divider--dark': darkMode
			}"
		></div>
	</div>
</template>

<script setup lang="ts" name="ChromeTab">
import IconClose from './IconClose.vue'
import SvgRadiusBg from './SvgRadiusBg.vue'
import { useBoolean } from '@/hooks/useBoolean'
import { THEME_CONFIG } from '@/config/config'

/** 填充颜色： [默认颜色, 暗黑主题颜色] */
type FillColor = [string, string]

/** 混合比例：[默认, 暗黑] */
type MixRatio = [number, number]

interface Props {
	/** 暗黑模式 */
	darkMode?: boolean
	/** 激活状态 */
	isActive?: boolean
	/** 主题颜色 */
	primaryColor?: string
	/** 是否显示关闭图标 */
	closable?: boolean
	/** 背景颜色 */
	bgColor?: FillColor
	/** 悬浮时的背景颜色 */
	hoverBgColor?: FillColor
	/** 激活状态时的混合颜色 */
	mixColor?: FillColor
	/** 混合比例(主题颜色的占比) */
	mixRatio?: MixRatio
}

withDefaults(defineProps<Props>(), {
	darkMode: false,
	isActive: false,
	primaryColor: THEME_CONFIG.primary,
	closable: true,
	bgColor: () => ['#ffffff', '#42486e'],
	hoverBgColor: () => ['#dee1e6', '#313964'],
	mixColor: () => ['#ffffff', '#000'],
	mixRatio: () => [0.13, 0.35]
})

interface Emits {
	/** 点击关闭图标 */
	(e: 'close'): void
}

const emit = defineEmits<Emits>()

const { bool: isHover, setTrue, setFalse } = useBoolean()

function handleClose(e: MouseEvent) {
	e.stopPropagation()
	emit('close')
}
</script>
<style lang="scss" scoped>
.admin-tab__chrome-tab {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding-right: 24px;
	padding-left: 24px;
	margin-right: -18px;
	cursor: pointer;
	&--active {
		z-index: 10;
	}
	&--hover {
		z-index: 9;
	}
	&__bg {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	&__slot {
		position: relative;
		z-index: 2;
		font-size: var(--el-font-size-base);
		white-space: nowrap;
	}
	&__icon {
		padding-left: 18px;
	}
	&__divider {
		position: absolute;
		right: 7.5px;
		z-index: 2;
		width: 1px;
		height: 16px;
		background-color: #1f2225;
		opacity: 1;
		transition: opacity 0.3s ease-in-out;
		&--hide {
			opacity: 0;
		}
		&--dark {
			background-color: rgb(255 255 255 / 90%) !important;
		}
	}
}
</style>
